<!--
 * @Description: 
 * @Autor: zhangbing
 * @Date: 2021-07-28 17:19:15
 * @LastEditors: zhangbing
 * @LastEditTime: 2021-07-28 18:52:47
-->

<template>
  <div class="nav-bar" v-nav-current="{
      curIdx,
      className: 'nav-item',
      activeClass: 'nav-current'
  }">
    <!-- :class="['nav-item', { 'nav-current': index === curIdx }]" -->
    <div
      v-for="(item, index) of items"
      :key="index"
      class="nav-item"
      @click="changeNav(index)"
    >
      {{ item }}
    </div>
  </div>
</template>

<script>
import navCurrent from "@/directives/navCurrent";

export default {
  name: "NavBar",
  directives: {
    navCurrent,
  },
  data() {
    return {
      curIdx: 0,
      items: ["选项1", "选项2", "选项3", "选项4"],
    };
  },

  created() {},
  mounted() {},
  methods: {
    changeNav(index) {
      this.curIdx = index;
    },
  },
};
</script>

<style>
.nav-bar {
  margin: 100px auto;
  width: 800px;
  height: 50px;
  border: 1px solid black;
  display: flex;
}
.nav-item {
  height: 48px;
  flex: 1;
  text-align: center;
  color: black;
  line-height: 48px;
  border: 1px solid black;
}

.nav-item.nav-current {
  background-color: green;
}
</style>

